<!--
 * @Author: LiMG
 * @Date: 2024-01-16 17:29:43
 * @Description: 系统首页
-->
<script setup lang="ts" name="MainLayout">
import { computed } from "vue";
import { RouterView } from 'vue-router';
import MainLogo from '@/components/layout/Logo.vue';
import MainMenu from '@/components/layout/Menu.vue';
import TopHeader from '@/components/layout/Header.vue';
import Home from '@/views/Home.vue';

const menuDom = computed(() => {
    const menuDom = document.getElementsByClassName("menu-container")[0];
    if (menuDom) {
        // 获取菜单容器的宽度
        return menuDom.clientWidth;
    }
    return 0;
});
</script>

<template>
    <div class="layout-container">
        <div class="left-menu-container">
            <main-logo />
            <main-menu />
        </div>
        <div class="right-main-container" :style="{ width: `calc(100% - ${menuDom}px)`, }">
            <top-header />
            <div class="content-container">
                <router-view>
                    <template #default="{ Component }">
                        <transition name="fade-slide" mode="out-in">
                            <component :is="Component ? Component : Home" />
                        </transition>
                    </template>
                </router-view>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.layout-container {
    width: 100%;
    height: 100%;
    display: flex;

    .left-menu-container {
        height: 100%;
        background-color: rgba(0, 21, 41, 1);
    }

    .right-main-container {
        height: calc(100% - 50px);

        .content-container {
            width: 100%;
            height: 100%;
            background-color: #f5f7f9;

            .v-enter-active,
            .v-leave-active {
                transition: opacity 0.5s ease;
            }

            .v-enter-from,
            .v-leave-to {
                opacity: 0;
            }
        }
    }
}
</style>